<div id="dragable" style="width:100px;height:100px;border:1px solid black;"></div>

<script>
  function enableDrag(element) {
    let x0, y0;
    let [ex, ey] = [0, 0]
    const move = e => {
      let [dx, dy] = [e.clientX - x0, e.clientY - y0]
      console.log(dx, dy)
      element.style.transform = `translate(${ex+dx}px,${ey+dy}px)`
    }
    const up = e => {
      [ex, ey] = [e.clientX, e.clientY]
      document.removeEventListener("mousemove", move)
      document.removeEventListener("mouseup", up)
    }
    element.addEventListener("mousedown", e => {
      [x0, y0] = [e.clientX, e.clientY]
      document.addEventListener("mousemove", move)
      document.addEventListener("mouseup", up)
    })
  }

  enableDrag(document.getElementById("dragable"))
</script>